<template>
  <div class="salarys">
    薪资
    <!-- data=list 绑定list数组为嵌套结构的数据源
    default-expand-all 打开页面默认展开嵌套结构
    show-checkbox 给嵌套结构每一项添加复选框
    check-strictly 父子结构的复选框不相互关联
    node-key=id 唯一标识符，设置这个属性才能让 getCheckedKeys 和 setCheckedKeys 内置方法生效-->
    <el-tree
      ref="mytree"
      :data="list"
      default-expand-all
      show-checkbox
      check-strictly
      node-key="id"
      :props="{ label: 'name', children: 'children' }"
    />
    <el-button @click="getChecked">点我设置</el-button>
    <el-button @click="setChecked">点我获取</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          id: 'bj',
          name: '北京',
          children: [
            { id: 'sy', name: '顺义' },
            { id: 'cy', name: '朝阳' }
          ]
        },
        {
          id: 'sz',
          name: '深圳',
          children: [
            { id: 'ba', name: '宝安' },
            { id: 'lh', name: '龙华' }
          ]
        }
      ]
    }
  },
  methods: {
    setChecked() {
      const res = this.$refs.mytree.getCheckedKeys()
      console.log(res)
    },
    getChecked() {
      this.$refs.mytree.setCheckedKeys(['sy', 'bj', 'ba'])
    }
  }
}
</script>

<style lang="scss">
.salarys {
}
</style>
